<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气案例_深度监视实现</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            深度监视：
                （1）Vue中watch配置项默认不检测对象内部值的改变（一层）；
                （2）配置deep:true可检测到对象内部值改变（多层）。
            备注：
                （1）Vue自身可以检测对象内部值的改变，但Vue提供的watch配置项默认不可以；
                （2）使用watch时提供数据的具体结构，决定是否采用深度监视。
        -->
        <!-- 准备一个容器 -->
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
            <hr/>
            <h3>a的值是{{numbers.a}}</h3>
            <button @click="numbers.a++">点我让a++</button>
            <h3>b的值是{{numbers.b}}</h3>
            <button @click="numbers.b++">点我让b++</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true,
                    numbers:{
                        a:1,
                        b:2,
                        c:3
                    }
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热' : '凉爽';
                    }
                },
                methods:{
                    changeWeather(){
                        this.isHot = !this.isHot;
                    }
                },
                watch:{
                    isHot:{
                        immediate:true, //初始化时让handler调用一下
                        //handler什么时候被调用？当isHot发生改变时
                        handler(newValue,oldValue){ //handler有两个参数分别是：新的值（newValue） 和 旧的值（oldValue）
                            console.log('info属性被修改了'+newValue,oldValue);
                        }
                    },
                    //监视“多级结构”中某个属性的变化（以''来包含对象名.属性名）
                    /* 'numbers.a':{
                        handler(){
                            console.log("a改变了");
                        }
                    }, */
                    //监视“多级结构”中所有属性的变化
                    numbers:{
                        deep:true, //开启深度监视，可监视到对象下所有属性的值变化，默认值为false
                        handler(){
                            console.log("numbers中的数据改变了");
                        }
                    }
                }
            })
            
        </script>
        
    </body>
</html>